<template>
	<div class="aid">
		<div class="base">
			<p class="fixed-top">
				{{ JSON.stringify(text) == '{}' ? '添加场地预约时间' : '修改场地预约时间' }}
				<a-icon class="icon-close" @click="closeFunction" type="close-circle" />
			</p>
			<div class="main" id="new_message">
				<a-form :form="form">
					<a-form-item label="开始时间">
						<a-time-picker style="width:100%;" @change="timeChange($event,1)"
							v-decorator="['StartTime', { rules: [{ required: true, message: '请选择开始时间' }] }]"
							format="HH:mm" />
					</a-form-item>
					<a-form-item label="结束时间">
						<a-time-picker style="width:100%;" @change="timeChange($event,2)"
							v-decorator="['EndTime', { rules: [{ required: true, message: '请选择结束时间' }] }]"
							format="HH:mm" />
					</a-form-item>
					<a-form-item class="fixed-bottom">
						<a-button type="primary" @click="handleSubmit">
							{{ JSON.stringify(text) == '{}' ? '确认添加' : '确认修改' }}</a-button>
						<a-button style="margin-left: 10px;" @click="closeFunction">取消</a-button>
					</a-form-item>
				</a-form>
			</div>
		</div>
	</div>
</template>

<script>
	import moment from 'moment';
	import {
		AddVenueTimeTable,
		DoUpdateVenueTimeTable
	} from '@/api/follow';
	export default {
		props: {
			text: Object,
			weeknum: Number
		},
		watch: {
			text: function(text) {
				if (JSON.stringify(text) == '{}') {
					this.currentID = ''
				} else {
					let that = this;
					that.currentID = text.ID;
					this.weeknum = text.WeekDay
					setTimeout(function() {
						that.form.setFieldsValue({
							StartTime: '2020-10-10 ' + text.StartTime,
							EndTime: '2020-10-10 ' + text.EndTime
						});
					}, 300);
				}
			}
		},
		data() {
			return {
				loading: false,
				formLayout: 'horizontal',
				form: this.$form.createForm(this, {
					name: 'coordinated'
				}),
				currentID: ''
			};
		},
		created() {},
		methods: {
			moment,
			closeFunction(data) {
				this.form.resetFields();
				this.$emit('closeFun', data);
			},
			timeChange(v, type) {
				let s = type == 1 ? v : this.form.getFieldValue('StartTime')
				let e = type == 2 ? v : this.form.getFieldValue('EndTime')
				if (s && e) {
					if (moment('2022-01-01 ' + moment(e).format('HH:mm:00')).diff(moment('2022-01-01 ' + moment(s).format(
							'HH:mm:00')), 'minutes') < 0) {
						this.$message.error('开始时间不能大于结束时间！')
						if (type == 1) {
							this.$nextTick(() => {
								this.form.setFieldsValue({
									StartTime: ''
								});
							})
						} else {
							this.$nextTick(() => {
								this.form.setFieldsValue({
									EndTime: ''
								});
							})
						}
						return false
					}

				}
			},
			handleSubmit(e) {
				this.form.validateFields(async (err, values) => {
					if (!err) {
						console.log('Received values of form: ', values);
						let data = {}
						data.StartTime = moment(values.StartTime).format('HH:mm:00');
						data.EndTime = moment(values.EndTime).format('HH:mm:00');
						data.VenueID = this.$route.query.id
						data.WeekDay = this.weeknum
						let res = {};
						if (JSON.stringify(this.text) == '{}') {
							res = await AddVenueTimeTable(data);
						} else {
							data.id = this.currentID;
							res = await DoUpdateVenueTimeTable(data);
						}
						if (res.data.code === 0) {
							this.$message.success(res.data.msg);
							this.closeFunction('1');
						} else {
							this.$message.error(res.data.msg);
						}
					}
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.aid {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		top: 0px;
		left: 0px;
		z-index: 999;
	}

	.base {
		position: absolute;
		width: 600px;
		height: 540px;
		border-radius: 14px;
		background: #fff;
		left: 50%;
		margin-left: -300px;
		top: 50%;
		margin-top: -270px;
		overflow-y: auto;
	}

	.main {
		height: 90%;
		overflow-y: scroll;
	}

	/deep/.ant-form {
		margin-top: 50px;
		padding-bottom: 50px;
	}

	/deep/.ant-form-item {
		margin: 20px 50px;
		display: flex;
	}

	/deep/.ant-form-item-label {
		width: 100px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: right;
	}

	/deep/.ant-form-item-control-wrapper {
		flex: 1;
	}

	/deep/.ant-calendar-picker {
		width: 100% !important;
	}

	.ant-upload-list-picture-card-container {
		width: 80px;
		height: 80px;
	}

	.fixed-top {
		width: inherit;
		position: absolute;
		line-height: 30px;
		top: 0px;
		background-color: white;
		z-index: 999;
		padding: 10px 0 5px 10px;

		.icon-close {
			font-size: 20px;
			float: right;
			margin: 5px 10px;
		}
	}

	.fixed-bottom {
		width: 164px;
		left: 50%;
		bottom: 0px;
		margin: 0px 0px 0px -82px !important;
		position: absolute;
		background-color: white;
		z-index: 999;
	}
</style>
